<template>
  <div class="cart-control">
		<transition name="cartcontrol">
			<div class="cart-decrease icon-remove_circle_outline" v-show="food.count>0" @click.stop.prevent="_decreaseCart"></div>
		</transition>
		<div class="cart-count" v-show="food.count>0">{{food.count}}</div>
		<div class="cart-add icon-add_circle" @click.stop.prevent="_addCart"></div>
  </div>
</template>
<script>
import Vue from 'vue';
export default {
  props: {
		food: {
			type: Object
		}
	},
	methods: {
		_addCart (event) {
			if (!this.food.count) {
				Vue.set(this.food, 'count', 1);
			} else {
				this.food.count++;
			}
			this.$emit('cart-add', event.target);
		},
		_decreaseCart () {
			if (this.food.count) {
				this.food.count--;
			}
		}
	}
};
</script>
<style lang="less" scoped>
	.cart-control {
		font-size: 0;
		.cart-decrease {
			display: inline-block;
			padding: 6px;
			font-size: 24px;
			color: rgb(0,160,220);
			opacity: 1;
			transform: translate3d(0,0,0) rotate(0);
			transition: all .3s linear;
			&.cartcontrol-enter, &.cartcontrol-leave-to {
				opacity: 0;
				transform: translate3d(24px,0,0) rotate(180deg);
			}
		}
		.cart-count {
			display: inline-block;
			vertical-align: top;
			font-size: 10px;
			width: 12px;
			padding-top: 6px;
			line-height: 24px;
			text-align: center;
			color: rgb(147,153,159);
		}
		.cart-add {
			display: inline-block;
			line-height: 24px;
			font-size: 24px;
			padding: 6px;
			color: rgb(0,160,220);
		}
	}
</style>
